<template>
<van-nav-bar
  :title="status"
  left-arrow
  @click-left="onClickLeft"
/>
<van-cell>
  <!-- 使用 right-icon 插槽来自定义右侧图标 -->
    <template #title>
        <span class="custom-title">{{name}}</span>
        <van-tag type="primary">{{mailNo}}</van-tag>
  </template>
  <template #right-icon>
    <van-button type="default" size="mini" @click="copy">复制</van-button>
  </template>
</van-cell>
  <van-steps direction="vertical" :active="0">
    <van-step v-for="(item, key) in list" :key="key">
      <h3>{{statusList[item.subLogisticsStatus]}}  {{format(item.time)}}</h3>
      <p>{{item.desc}}</p>
    </van-step>
  </van-steps>
</template>

    <script setup>
    const {proxy} = getCurrentInstance()

    const id = proxy.$route.query.id ?? 0;
    const list = ref([])
    const status = ref('')
    const mailNo = ref('')
    const name = ref('')
    const statusList = {
        ACCEPT :'已揽件',
        TRANSPORT :'运输中',
        DELIVERING :'派送中',
        STA_INBOUND :'代取件',
        STA_SIGN:'已签收'
    }
  onMounted(() => {
    ExpressInfo()
  })
  
  const ExpressInfo = async () =>
  {

    var result = await proxy.$GET({url: '/order/express', params:{id}})

    if(result.code == 0)
    {
      showFailToast({
        message: result.msg,
        onClose: () => proxy.$router.go(-1)
      })
      return false
    }
    status.value = result.data.logisticsStatusDesc
    name.value = result.data.logisticsCompanyName
    mailNo.value = result.data.mailNo
    list.value = [...(result.data.logisticsTraceDetailList)].reverse()
  }
  const onClickLeft = ()=>proxy.$router.go(-1)
  const format = (time)=>{
    //shijianchuo是整数，否则要parseInt转换
    var date = new Date(time);
    var m = date.getMonth()+1;
    var d = date.getDate();
    var h = date.getHours();
    var mm = date.getMinutes();
    return m+'-'+d+' '+h+':'+mm;
}
import useClipboard from 'vue-clipboard3';
const { toClipboard } = useClipboard();
const copy = async()=>{
        let result = await toClipboard(mailNo.value);
        if(result.text){
            showSuccessToast({
                message: '复制成功',
                duration: 1000,
            })
        }else{
            showFailToast({
                message: '复制失败',
                duration: 1000,
            })
        }
    }
</script>